<template>
  <el-card>
    <div :id="areaId" :style="{ height: height, width: width }"></div>
  </el-card>
</template>

<script>
// 导入echarts
import * as echarts from "echarts";
export default {
  // areaId:绘制容器id ;  option: 配置对象
  //   props: ["areaId", "option","height","width"],
  props: {
    areaId: String,
    option: Object,
    height: {
      default: "400px",
      type: String,
    },
    width: {
      default: "100%",
      type: String,
    },
  },
  mounted() {
    this.render();
  },
  methods: {
    render() {
      // 1-获取渲染区域的DOM对象
      const area = document.querySelector("#" + this.areaId);
      // 2-创建实例对象
      const instace = echarts.init(area);
      // 3-设置配置对象&&渲染图标
      instace.setOption(this.option);
    },
  },
};
</script>

<style>
</style>